<template>
  <div>
    <el-form-item :prop="item.name || ''" :label="item.label" v-bind="item.formItemProps || {}" ref="el-form-item">
      <el-row type="flex" justify="space-between" :style="contentStyle">
        <div class="flexitem">
          <el-input ref="input" type="text" v-model="mvalue" v-bind="opt" @keyup.enter.native="eventTrigger( 'onEnter', $event)"></el-input>
        </div>
        <div class :style="captchaStyle">
          <el-image :src="picUrl" fit="cover" style="width: 100%; height: 100%;" @click="resetCaptchaPicture">
            <div slot="error" class="image-slot">
              <i class="el-icon-loading"></i>
            </div>
            <div slot="placeholder" class="image-loading-slot">
              加载中
              <span class="dot">...</span>
            </div>
          </el-image>
        </div>
      </el-row>
    </el-form-item>
  </div>
</template>

<script>
  import { objectAssign } from "../../utils/common";
  import StrAllMixin from "../validMixins/StrAllMixin";
  import Required from "../validMixins/Required";
  import NumberAllMixin from "../validMixins/NumberAllMixin";
  import EventTrigger from "../plugsMixins/EventTrigger";
  import baseConfig from "../../config/base";


  var defaultCaptchaStyle = { width: "120px", height: "40px", marginLeft: "5px" };
  var defaultContentStyle = { width: "100%" };

  /**
   * 验证码，服务器版
   *
   */
  export default {
    name: "PopoCaptcha",
    props: {
      value: { type: String },
      item: { type: Object },
      formData: { type: Object },
    },
    mixins: [EventTrigger, StrAllMixin, Required, NumberAllMixin],
    data() {
      return {
        mvalue: this.value,
        picSourceUrl: "",
        picUrl: "",
        captchaStyle: defaultCaptchaStyle,
        contentStyle: defaultContentStyle,
        captchaCodeLength: 4,
        opt: {},
      };
    },
    watch: {
      mvalue(val) {
        this.$emit("input", val);
      },
    },
    created() {
      // console.log( "input", this);
      var opt = objectAssign({}, this.item.props);
      this.captchaStyle = objectAssign(
        {},
        defaultCaptchaStyle,
        {
          width: this.item.captchaWidth !== undefined ? this.item.captchaWidth : this.captchaStyle.width,
          height: this.item.captchaHeight !== undefined ? this.item.captchaHeight : this.captchaStyle.height,
        },
        this.item.captchaStyle
      );

      this.contentStyle = objectAssign(
        {},
        defaultContentStyle,
        {
          width: this.item.contentWidth !== undefined ? this.item.contentWidth : this.contentStyle.width,
        },
        this.item.contentStyle
      );

      let picUrl = this.item.picUrl;
      if( picUrl.substr(0,1) == "@"){
        picUrl = baseConfig.server_root + picUrl.substr( 1);
      }
      this.picSourceUrl = picUrl;

      this.opt = opt;

      // if (this.item.codeLength !== undefined) {
      //   var label = this.item.label;
      //   this.$emit("componentNotify", "addRule", {
      //     field: this.item.name,
      //     rules: [
      //       { required: true, message: "请填写" + label },
      //       { type: "string", len: this.item.codeLength, message: label + "必须是" + this.item.codeLength + "个字符" },
      //     ],
      //   });
      // }
    },
    mounted() {
      this.$nextTick(() => {
        this.resetCaptchaPicture();
      });
    },
    methods: {
      resetCaptchaPicture() {
        this.picUrl = this.picSourceUrl + (this.picSourceUrl.indexOf("?") >= 0 ? "&" : "&") + "____rd=" + Math.random();
      },
    },
  };
</script>


<style scoped lang="scss">
::v-deep {
  .el-avatar > img {
    width: 100%;
    height: 100%;
  }

  .image-slot {
    text-align: center;
    font-size: 20px;
    color: #ccc;
  }
  .image-loading-slot {
    text-align: center;
    font-size: 12px;
    color: #ccc;
  }
}
.flexitem {
  flex: 10;
}
</style>
